<!-- 快速生成vue3代码 -->
<template>
  <div class="locations-map">
    <div class="search-btn">
      <div>
        <el-input
          style="width: 300px; height: 30px"
          v-model="mapData.keyword"
          @keydown.enter="search"
          placeholder="点击地图选择地点"
        />
        <el-button @click="search">搜索</el-button>
      </div>
      <div @click="close">
        <el-tag size="large">关闭</el-tag>
      </div>
    </div>

    <div id="container" class="map" style=""></div>
  </div>
</template>
<script setup>
const props = defineProps({
  locationName: {
    type: Object,
    default: {},
  },
});
//引入
import { onMounted, ref, reactive, defineEmits } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
const emit = defineEmits();

const map = ref(null);
const mapInfo = ref(null); //点击地图选择的信息
const mapData = reactive({
  map: {},
  keyword: "",
  selectedLocation: {},
  selectedAddress: "",
});
onMounted(() => {
  window._AMapSecurityConfig = {
    securityJsCode: "ee59216503881b3e858f5e9270e6348c", // 密钥
  };

  AMapLoader.load({
    key: "66b68197d84ce17383c5c68f4c29c490", //key值
    version: "1.4.15",
    plugins: ["AMap.PlaceSearch"],
  })
    .then((AMap) => {
      const mapInstance = new AMap.Map("container", {
        zoom: 11,
        // center: [113.984358, 35.288668],
      });

      mapInstance.on("click", (e) => {
        //点击位置获取经纬度
        const lng = e.lnglat.getLng();
        const lat = e.lnglat.getLat();
        // 触发父组件传递的回调函数
        // this.$emit('map-click', lng, lat);
        console.log(lng, lat, "111111");
        mapInfo.value = {
          lng,
          lat,
          isMapFlag: false,
        };
        emit("mapClick", mapInfo.value);
      });

      mapData.map = mapInstance;
      console.log(props.locationName, "--------------");
      if (props.locationName) {
        mapData.keyword = props.locationName;
        search(props.locationName);
      }
    })
    .catch((e) => {
      console.log(e, "222222");
    });
});
const search = () => {
  console.log(mapData.keyword, "333333");
  if (mapData.keyword) {
    AMapLoader.load({
      key: "66b68197d84ce17383c5c68f4c29c490", //key值
      version: "1.4.15",
      plugins: ["AMap.PlaceSearch"],
    })
      .then((AMap) => {
        const placeSearch = new AMap.PlaceSearch({
          city: "",
          map: mapData.map,
        });
        console.log(mapData.keyword, "444444", placeSearch);
        placeSearch.search(mapData.keyword, (status, result) => {
          console.log(status, result, "555555");
          if (status === "complete" && result.info === "OK") {
            const pois = result.poiList.pois;
            if (pois.length > 0) {
              const { location } = pois[0];
              mapData.map.setCenter(location);
            }
          } else {
            console.log("搜索失败或无结果");
          }
        });
      })
      .catch((e) => {
        console.log(e, "arfrggsdfg");
      });
  }
};

// 点击关闭按钮
const close = () => {
  mapInfo.value = {
    lng: undefined,
    lat: undefined,
    isMapFlag: false,
  };
  emit("mapClick", mapInfo.value);
};
defineExpose({
  mapInfo,
});
</script>

<style scoped>
.locations-map {
  position: fixed;
  top: 0;
  left: 200px;
  width: 100vw;
  height: 100vh;
  z-index: 2023;
  background: #ffffff;
  padding: 20px;
}
.search-btn {
  width: 85vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
button {
  margin-left: 10px;
}
.map {
  width: 85vw;
  height: 100vh;
  border-radius: 5px;
  margin-top: 20px;
}
</style>
